
<script setup>
import { ref, watchEffect } from 'vue'
import { useRouter, useRoute } from 'vue-router'
let activeKey = ref('detail')
const router = useRouter()
const route = useRoute()
const queryInfo = ref(route.query)

const handleChange = name => {
  if (name === activeKey.value) return
  router.push({ name, query: { ...route.query } })
}
const handleManage = () => router.push('/user/book-manage')
watchEffect(() => {
  activeKey.value = route.name
},[route.name])
</script>
<template>
  <div class="nav">
    <a-button class="btn" type="link" @click="handleManage">作品管理</a-button><span>{{ queryInfo.title }}</span>
  </div>
  <a-tabs v-model:activeKey="activeKey" size="large" @tabClick="handleChange">
    <a-tab-pane key="detail" tab="书籍详情"></a-tab-pane>
    <a-tab-pane key="manage" tab="章节管理"></a-tab-pane>
    <a-tab-pane key="upload" tab="上传章节"></a-tab-pane>
    <a-tab-pane key="draft" tab="草稿箱" forceRender></a-tab-pane>
  </a-tabs>
  <router-view>
  </router-view>
</template>

<style lang="less" scoped>
.nav {
  margin-bottom: 10px;
  .btn {
    font-size: 12px;
  }
}
</style>